<template>
  <van-action-sheet v-model="show" title="频道管理">
    <div class="channel">
      <div class="title">
        我的频道
        <van-button @click="isEdit = !isEdit" type="danger" plain size="mini">{{
          isEdit ? '取消' : '编辑'
        }}</van-button>
      </div>
      <van-grid>
        <van-grid-item v-for="(item, index) in ownList" :key="item.id">
          <span :class="{ active: index === value }" @click="into(index)">{{
            item.name
          }}</span>
          <van-icon
            v-show="index !== 0 && isEdit"
            @click="$emit('del', index)"
            class="del-icon"
            name="cross"
          ></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="channel">
      <div class="title">可选频道</div>
      <van-grid>
        <van-grid-item
          v-for="item in optList"
          :key="item.id"
          :text="item.name"
          @click="$emit('add', item)"
        />
      </van-grid>
    </div>
  </van-action-sheet>
</template>

<script>
export default {
  props: {
    ownList: {
      type: Array,
      required: true
    },
    allList: {
      type: Array,
      required: true
    },

    value: {
      type: Number,
      required: true
    }
  },
  // 自定义v-model的地方
  // 如果不自定义，外面对本组件用v-model的时候
  // 默认生成 :value=数据 以及 @input
  // 但是你自定义后，它就生成 :idx=数据 @xx
  // model: {
  //   prop: 'idx',
  //   event: 'xx'
  // },
  data () {
    return {
      show: false,
      isEdit: false
    }
  },
  methods: {
    into (index) {
      // 1. 子传父，把被点的下标传递给父
      this.$emit('input', index)
      // 2. 隐藏sheet
      this.show = false
    }
  },
  computed: {
    optList () {
      // 对所有频道数组做筛选，筛选出不在我的频道里的频道
      const list = this.allList.filter(v1 => {
        // 要判断v1是否在我的频道里，把不在的给筛选出来，在的不筛选
        const res = this.ownList.find(v2 => v2.id === v1.id)
        // 取反代表判断不在里面
        if (!res) {
          // 代表把当前元素筛选到新数组
          return true
        } else {
          return false
        }
      })

      return list
    }
    // optList () {
    //   // 对所有频道数组做筛选，筛选出不在我的频道里的频道
    //   return this.allList.filter(
    //     v1 => !this.ownList.find(v2 => v2.id === v1.id)
    //   )
    // }
  }
}
</script>

<style lang="less" scoped>
.channel {
  padding: 20px;
  .title {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .del-icon {
    position: absolute;
    right: 3px;
    top: 5px;
  }

  .active {
    color: red;
  }
}
</style>
